//动态宽高度
.widthReset(@val) when (@val <=100) {
    .width@{val} {
        .width(@val);
    }
    .widthReset(@val+1);
}
.widthReset(1);
.width(@a) {
    width: percentage(@a);
}
.wReset(@val) when (@val <=400) {
    .w@{val} {
        .w(@val);
    }
    .wReset(@val+1);
}
.wReset(1);
.w(@a) {
    width: unit(@a, px) !important;
}

.heightReset(@val) when (@val <=100) {
    .height@{val} {
        .height(@val);
    }
    .heightReset(@val+1);
}
.heightReset(1);
.height(@a) {
    height: percentage(@a);
}
.hReset(@val) when (@val <=400) {
    .h@{val} {
        .h(@val);
    }
    .hReset(@val+1);
}
.hReset(1);
.h(@a) {
    height: unit(@a, px) !important;
}

//字体大小
.fsReset(@val) when (@val <=40) {
    .fs@{val} {
        .fs(@val);
    }
    .fsReset(@val+1);
}
.fsReset(10);
.fs(@a) {
    font-size: unit(@a, px);
}

.resetSize(@val) when (@val <=200) {
    .radius@{val} {
        .radius(@val);
    }
    .radiusTL@{val} {
        .radiusTL(@val);
    }
    .radiusTR@{val} {
        .radiusTR(@val);
    }
    .radiusBL@{val} {
        .radiusBL(@val);
    }
    .radiusBR@{val} {
        .radiusBR(@val);
    }
    .mg@{val} {
        .mg(@val);
    }
    .mgT@{val} {
        .mgT(@val);
    }
    .mgR@{val} {
        .mgR(@val);
    }
    .mgB@{val} {
        .mgB(@val);
    }
    .mgL@{val} {
        .mgL(@val);
    }
    .pd@{val} {
        .pd(@val);
    }
    .pdT@{val} {
        .pdT(@val);
    }
    .pdR@{val} {
        .pdR(@val);
    }
    .pdB@{val} {
        .pdB(@val);
    }
    .pdL@{val} {
        .pdL(@val);
    }
    .lh@{val} {
        .lh(@val);
    }
    .top@{val} {
        .top(@val);
    }
    .left@{val} {
        .left(@val);
    }
    .right@{val} {
        .right(@val);
    }
    .bottom@{val} {
        .bottom(@val);
    }
    .resetSize(@val+1);
}
.resetSize(0);

.radius(@a) {
    border-radius: unit(@val, px);
}
.radiusTL(@a) {
    border-top-left-radius: unit(@val, px);
}
.radiusTR(@a) {
    border-top-right-radius: unit(@val, px);
}
.radiusBL(@a) {
    border-bottom-left-radius: unit(@val, px);
}
.radiusBR(@a) {
    border-bottom-right-radius: unit(@val, px);
}
.mg(@a) {
    margin: unit(@a, px);
}
.mgT(@a) {
    margin-top: unit(@a, px);
}
.mgR(@a) {
    margin-right: unit(@a, px);
}
.mgB(@a) {
    margin-bottom: unit(@a, px);
}
.mgL(@a) {
    margin-left: unit(@a, px);
}
.pd(@a) {
    padding: unit(@a, px);
}
.pdT(@a) {
    padding-top: unit(@a, px);
}
.pdR(@a) {
    padding-right: unit(@a, px);
}
.pdB(@a) {
    padding-bottom: unit(@a, px);
}
.pdL(@a) {
    padding-left: unit(@a, px);
}
.lh(@a) {
    line-height: unit(@a, px);
}
.top(@a) {
    top: unit(@a, px);
}
.left(@a) {
    left: unit(@a, px);
}
.right(@a) {
    right: unit(@a, px);
}
.bottom(@a) {
    bottom: unit(@a, px);
}

.textC {
    text-align: center !important;
}
.textL {
    text-align: left !important;
}
.textR {
    text-align: right !important;
}
.bold {
    font-weight: bold;
}
.normal {
    font-weight: normal;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.cursor {
    cursor: pointer;
}

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.line-clamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.line-clamp3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.line-clamp4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.bgColorF {
    background-color: #fff;
}
.bgColorF3 {
    background-color: #f3f3f3;
}
.bgColorE7 {
    background-color: #e7e7e7;
}
.bgColorE {
    background-color: #eee;
}
.bgColorD {
    background-color: #ddd;
}
.bgColorC {
    background-color: #ccc;
}
.bgColor6 {
    background-color: #666;
}
.bgColor3 {
    background-color: #333333;
}
.bgColor9 {
    background-color: #999999;
}
.bgColor_wt {
    background-color: #e9a129;
}
.bgColor_wt_red {
    background-color: #c11920;
}

.color_wt {
    color: #e9a129;
}
.color_wt_red {
    color: #c11920;
}
.color0 {
    color: #000;
}
.color3 {
    color: #333;
}
.color6 {
    color: #666;
}
.color9 {
    color: #999;
}
.colorR {
    color: #ff0000;
}
.colorBlue {
    color: #0000ff;
}
.colorE {
    color: #eeeeee;
}
.colorF {
    color: #fff !important;
}

.border_f3 {
    border: #f3f3f3;
}
.border_ddd {
    border: 1px solid #ddd;
}
.border_line_ddd {
    border-bottom: 1px solid #ddd;
}

.overflow {
    overflow: auto;
}
.overflow-y {
    overflow-y: auto;
}
.italic {
    font-style: italic;
}
.word-break {
    word-break: break-all;
}
.text-indent-2 {
    text-indent: 2rem;
}
.inline-block {
    display: inline-block;
}
.text-decoration-line {
    text-decoration: line-through;
}
.boxShadow {
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
}
.verticalAlign {
    display: inline-block;
    vertical-align: middle;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.flex-left-center {
    display: flex;
    justify-content: left;
    align-items: center;
}
.flex-right-right {
    display: flex;
    justify-content: right;
    align-items: flex-start;
}
.flex-start {
    display: flex;
    align-items: flex-start;
}
.flex-row {
    display: flex;
    align-items: flex-start;
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
